<template>
  <div :class="['container', { wap: isMobile }]">
    <!-- 加一个按钮 安卓点击视频播放 （没有操作指引的时候）-->
    <div class="staBtn" v-if="!isShowHint && staBtn">
      <div @click="staBtnFu">开始浏览</div>
    </div>

    <div class="poster" ref="posterDiv" style="z-index: -99" v-if="imgUrl">
      <img :src="imgUrl" alt="" class="bg" />
      <img :src="imgTitle" alt="" class="tit" />
      <!-- <img :src="imgTit1" alt="" class="mtit1" v-if="isMobile">
            <img :src="imgTit2" alt="" class="mtit2" v-if="isMobile"> -->
    </div>
    <div class="seasons" ref="targetDiv">
      <div class="imgbg" v-show="curtype.name == '四季'">
        <video
          id="videobg"
          ref="videobg"
          autoplay
          loop
          x5-video-player-type="h5"
          x5-video-player-fullscreen="true"
          :src="`https://4dscene.4dage.com/wuhu/PotalaPlace/${curseason.id}/${cur}-h.mp4`"
          muted
          webkit-playsinline="true"
          playsinline="true"
          :poster="`https://4dscene.4dage.com/wuhu/PotalaPlace/${curseason.id}/${cur}_m.jpg`"
          v-if="isMobile"
        ></video>
        <video
          id="videobg"
          ref="videobg"
          autoplay
          loop
          :src="`https://4dscene.4dage.com/wuhu/PotalaPlace/${curseason.id}/${cur}.mp4`"
          muted
          webkit-playsinline="true"
          playsinline="true"
          :poster="`https://4dscene.4dage.com/wuhu/PotalaPlace/${curseason.id}/${cur}.jpg`"
          v-else
        ></video>
      </div>
      <div class="imgbg" v-show="curtype.name == '时辰'" v-if="list[1].done">
        <video
          id="videobg"
          ref="videobg"
          autoplay
          loop
          x5-video-player-type="h5"
          x5-video-player-fullscreen="true"
          :src="`https://4dscene.4dage.com/wuhu/PotalaPlace/Time_m.mp4`"
          muted
          @timeupdate="updateTime"
          webkit-playsinline="true"
          playsinline="true"
          :poster="`https://4dscene.4dage.com/wuhu/PotalaPlace/time_m.png`"
          v-if="isMobile"
        ></video>
        <video
          id="videobg"
          ref="videobg"
          autoplay
          loop
          :src="`https://4dscene.4dage.com/wuhu/PotalaPlace/Time.mp4`"
          muted
          @timeupdate="updateTime"
          webkit-playsinline="true"
          playsinline="true"
          :poster="`https://4dscene.4dage.com/wuhu/PotalaPlace/time.png`"
          v-else
        ></video>
      </div>
    </div>
    <div class="bottom_options" v-if="curtype.name == '四季'">
      <span :class="{ active: cur == 1 }" @click="getCur(1)"> 1</span>
      <span :class="{ active: cur == 2 }" @click="getCur(2)"> 2</span>
      <span :class="{ active: cur == 3 }" @click="getCur(3)"> 3</span>
      <span :class="{ active: cur == 4 }" @click="getCur(4)"> 4</span>
    </div>
    <img :src="imgLogo" alt="" class="logo" v-if="!isMobile" />
    <img
      src="../../assets/back.png"
      class="back"
      @click="$router.replace('/')"
    />
    <div class="actions">
      <div class="top-btns">
        <div
          :class="['item', { active: curtype.name == item.name }]"
          v-for="(item, i) in list"
          :key="i"
          @click="changeType(item)"
        >
          {{ item.name }}
        </div>
      </div>
      <div class="left-btns" :class="{ btns2: curtype.id == 1 }">
        <div class="list" v-if="curtype.id == 0">
          <div
            :class="['item', { active: item.season == curseason.name }]"
            v-for="(item, i) in seasons"
            :key="i"
            @click="getCurseason(item)"
          >
            {{ item.season }}
          </div>
        </div>
        <div class="list" v-else>
          <div
            :class="['item', { active: item.name == curtime.name }]"
            v-for="(item, i) in times"
            :key="i"
            @click="getCurtime(item)"
          >
            {{ item.name }}
          </div>
        </div>
      </div>
      <div class="bottom-btn" @click="getPoster">
        <img :src="imgPhoto" alt="" />
      </div>
    </div>
    <div class="hint" v-if="isShowHint">
      <div class="step1" v-if="curstep == 1">
        <img
          :src="mimgStep1"
          alt=""
          class="txt"
          @click="curstep = 2"
          v-if="isMobile"
        />
        <img :src="imgStep1" alt="" class="txt" v-else />
        <img
          :src="imgNext"
          alt=""
          class="next"
          @click="curstep = 2"
          v-if="!isMobile"
        />
      </div>
      <div class="step2" v-if="curstep == 2">
        <img
          :src="mimgStep2"
          alt=""
          class="txt"
          @click="curstep = 4"
          v-if="isMobile"
        />
        <img :src="imgStep2" alt="" class="txt" v-else />
        <img
          :src="imgNext"
          alt=""
          class="next"
          @click="curstep = 4"
          v-if="!isMobile"
        />
      </div>
      <div class="step3" v-if="curstep == 3" @click="curstep = 4">
        <img
          :src="mimgStep3"
          alt=""
          class="txt"
          @click="curstep = 4"
          v-if="isMobile"
        />
        <img :src="imgStep4" alt="" class="txt" v-else />
        <img :src="imgNext" alt="" class="next" v-if="!isMobile" />
      </div>
      <div class="step4" v-if="curstep == 4">
        <img
          :src="mimgStep3"
          alt=""
          class="txt"
          @click="isShowHint = false"
          v-if="isMobile"
        />
        <img :src="imgStep3" alt="" class="txt" v-else />
        <img :src="imgNext" alt="" class="next" @click="isShowHint = false" />
      </div>
    </div>
    <div class="pop_poster_shade" v-show="isPoster" @click.prevent>
      <div class="pop_poster">
        <div class="loading">拍照中</div>
        <div class="poster_con">
          <img
            :src="posterUrl"
            alt=""
            class="poster_img"
            @error="checkImg"
            @contextmenu.prevent="preventDefault"
          />
        </div>

        <img :src="imgShare" alt="" class="share_ico" @click="SavePoster" />
        <img :src="imgClose" alt="" class="close_ico" @click="close" />
      </div>
    </div>
  </div>
</template>
<script setup>
import imgLogo from "./images/logo.png";
import imgTitle from "./images/title.png";
import imgTit1 from "./images/mtit1.png";
import imgTit2 from "./images/mtit2.png";
import imgPhoto from "./images/photo_ico.png";
import imgShare from "./images/share.png";
import imgClose from "./images/close.png";
import imgStep1 from "./images/hint1.png";
import imgStep2 from "./images/hint2.png";
import imgStep3 from "./images/hint3.png";
import imgStep4 from "./images/hint4.png";
import mimgStep1 from "./images/mhint1.png";
import mimgStep2 from "./images/mhint2.png";
import mimgStep3 from "./images/mhint3.png";
import imgNext from "./images/next_step.png";
import { ref, reactive, inject, onMounted } from "vue";
const isMobile = inject("isMobile");
import html2canvas from "html2canvas";

// 开始浏览
const staBtn = ref(true);
// 点击开始浏览
const staBtnFu = () => {
  staBtn.value = false;
  videobg.value.play();
};

const targetDiv = ref();
const posterDiv = ref();
const isShowHint = ref(true);
const cur = ref(1);
const videobg = ref();
const list = [
  {
    id: 0,
    name: "四季",
    done: true,
  },
  {
    id: 1,
    name: "时辰",
    done: false,
  },
];
const curtype = reactive({
  id: 0,
  name: "四季",
});
const seasons = reactive([
  {
    id: 1,
    season: "春",
    videos: [1, 2, 3, 4],
  },
  {
    id: 2,
    season: "夏",
    videos: [1, 2, 3, 4],
  },
  {
    id: 3,
    season: "秋",
    videos: [1, 2, 3, 4],
  },
  {
    id: 4,
    season: "冬",
    videos: [1, 2, 3, 4],
  },
]);
const times = reactive([
  {
    id: 1,
    name: "子",
    timestart: 0,
  },
  {
    id: 2,
    name: "丑",
    timestart: 5,
  },
  {
    id: 3,
    name: "寅",
    timestart: 10,
  },
  {
    id: 4,
    name: "卯",
    timestart: 15,
  },
  {
    id: 5,
    name: "辰",
    timestart: 20,
  },
  {
    id: 6,
    name: "巳",
    timestart: 25,
  },
  {
    id: 7,
    name: "午",
    timestart: 30,
  },
  {
    id: 8,
    name: "未",
    timestart: 35,
  },
  {
    id: 9,
    name: "申",
    timestart: 40,
  },
  {
    id: 10,
    name: "酉",
    timestart: 45,
  },
  {
    id: 11,
    name: "戌",
    timestart: 50,
  },
  {
    id: 12,
    name: "亥",
    timestart: 0,
  },
]);
const curstep = ref(1);
const curseason = reactive({
  id: 1,
  name: "春",
});
const curtime = reactive({
  id: 1,
  name: "子",
});
const getCur = (num) => {
  cur.value = num;
  if (videobg.value) videobg.value.play();
};
const imgUrl = ref();
const posterUrl = ref();
const isPoster = ref(false);
// const captureContent = ()=>{
//     const _targetDiv = targetDiv.value;
//     html2canvas(_targetDiv,{backgroundColor:'#fff'}).then((canvas)=>{
//         const base64 = canvas.toDataURL('image/png')
//         const myBlob = dataURLtoBlob(base64)
//         const myUrl = URL.createObjectURL(myBlob)
//         console.log(myUrl)
//     })
// }
//切换四季时辰
const changeType = (item) => {
  if (!item.done) {
    item.done = true;
    setTimeout(() => {
      videobg.value.play();
    }, 100);
  }

  curtype.id = item.id;
  curtype.name = item.name;
  if (videobg.value) videobg.value.play();
};
//获取当前季节
const getCurseason = (item) => {
  curseason.name = item.season;
  curseason.id = item.id;
  cur.value = 1;
};
const getCurtime = (item) => {
  curtime.name = item.name;
  curtime.id = item.id;
  cur.value = 1;

  videobg.value.currentTime = item.timestart;
};
const updateTime = () => {
  let time = videobg.value.currentTime;

  if (time >= 0 && time < 5) {
    curtime.name = times[0].name;
  } else if (time >= 5 && time < 10) {
    curtime.name = times[1].name;
  } else if (time >= 10 && time < 15) {
    curtime.name = times[2].name;
  } else if (time >= 15 && time < 20) {
    curtime.name = times[3].name;
  } else if (time >= 20 && time < 25) {
    curtime.name = times[4].name;
  } else if (time >= 25 && time < 30) {
    curtime.name = times[5].name;
  } else if (time >= 30 && time < 35) {
    curtime.name = times[6].name;
  } else if (time >= 35 && time < 40) {
    curtime.name = times[7].name;
  } else if (time >= 40 && time < 45) {
    curtime.name = times[8].name;
  } else if (time >= 45 && time < 50) {
    curtime.name = times[9].name;
  } else if (time >= 50 && time < 55) {
    curtime.name = times[10].name;
  } else if (time >= 55 && time < 60) {
    curtime.name = times[11].name;
  }
};
// const captureIframe = async() =>{
//     try {

//         const iframeDocument = modelframe.value.contentDocument || modelframe.value.contentWindow.document;
//         console.log(modelframe.value)
//         const canvas = await html2canvas(iframeDocument.body);
//         const img = canvas.toDataURL('image/png');
//         imgUrl.value = img ;
//     }catch (error) {
//         console.error('转换出错:', error)
//     }

// //   iframe.onload = function() {
// //     try {
// //       // 确保跨域策略不会阻止访问
// //       var iframeCanvas = iframe.contentWindow.document.createElement('canvas');
// //       iframeCanvas.width = iframe.offsetWidth;
// //       iframeCanvas.height = iframe.offsetHeight;
// //       iframeCanvas.getContext('2d').drawImage(iframe.contentWindow.document.body, 0, 0);

// //       ctx.drawImage(iframeCanvas, 0, 0);
// //       const img3 = canvas.toDataURL('image/png');
// //       imgUrl.value = img;
// //       console.log(img3)
// //     } catch (e) {
// //       console.error('跨域限制: 不能访问 iframe 内容');
// //     }
// //   };
// }
const captureElement = async () => {
  try {
    const canvas = await html2canvas(targetDiv.value);
    const img = canvas.toDataURL("image/png");
    imgUrl.value = img;
    console.log(img);
  } catch (error) {
    console.log(error);
  }
};
const captureElement2 = async () => {
  try {
    const canvas2 = await html2canvas(posterDiv.value);
    const img2 = canvas2.toDataURL("image/png");
    posterUrl.value = img2;
    isPoster.value = true;
  } catch (error) {
    console.log(error);
  }
};
const getPoster = async () => {
  await captureElement();
  // captureIframe();
  setTimeout(function () {
    captureElement2();
  }, 500);
};
const SavePoster = async () => {
  const blob = await fetch(posterUrl.value).then((res) => res.blob());
  const imageUrl = URL.createObjectURL(blob);

  const a = document.createElement("a");
  a.href = imageUrl;
  a.download = "poster.png";
  a.click();
  URL.revokeObjectURL(a.href);
  isPoster.value = false;
};
const close = () => {
  isPoster.value = false;
  posterUrl.value = "";
};
// const copyImageToClipboard = async () => {
//     try {
//         const imageSrc = posterUrl.value; // 替换为您要复制的图片的实际URL
//         const response = await fetch(imageSrc);
//         const blob = await response.blob();
//         await navigator.clipboard.write([
//             new ClipboardItem({
//                 [blob.type]: blob
//             })
//         ]);
//         console.log('图片已复制到剪切板');
//         isPoster.value = false;
//     } catch (error) {
//         console.error('复制失败:', error);
//     }
// };

const getCookie = (name) => {
  const cookies = document.cookie.split("; ");
  for (let i = 0; i < cookies.length; i++) {
    const [cookieName, cookieValue] = cookies[i].split("=");
    if (name === cookieName) {
      return decodeURIComponent(cookieValue);
    }
  }
  return "";
};
const setCookie = (name, value, expires = "") => {
  document.cookie = `${name}=${encodeURIComponent(value)}${expires}`;
};
const preventDefault = (e) => {
  e.preventDefault();
};
const is_weixn = () => {
  var ua = navigator.userAgent.toLowerCase();
  if (ua.match(/MicroMessenger/i) == "micromessenger") {
    return true;
  } else {
    return false;
  }
};
onMounted(() => {
  //获取cookie
  const user = getCookie("user");
  const expires =
    "; expires=" + new Date(Date.now() + 7 * 24 * 60 * 60 * 1000).toUTCString();
  if (user == "nofirst") isShowHint.value = false;
  setCookie("user", "nofirst", expires);
  if (videobg.value) {
    videobg.value.play();
  }
  document.addEventListener(
    "WeixinJSBridgeReady",
    function () {
      videobg.value.play();
    },
    false
  );

  //判断是否是Android端打开链接
  if (navigator.userAgent.indexOf("Android") > 0) {
    //如果是Android的话，在判断是否是微信端打开链接
    //如果是在Android端微信打开 触摸播放
    if (is_weixn()) {
      document.addEventListener("touchstart", function () {
        videobg.value.play();
      });
    } else {
    }
  }
});
</script>
<style lang="scss" scoped>
.container {
  position: relative;
  width: 100%;
  height: 100%;
  background: #fff;

  .staBtn {
    display: none !important;
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: 1111;
    background-color: rgba(0, 0, 0, 0.5);
    display: flex;
    // justify-content: center;
    align-items: center;
    // padding-left: -20%;
    & > div {
      transform: rotate(90deg);

      width: 100px;
      height: 40px;
      border-radius: 20px;
      background-color: #9d3127;
      color: #e7d09d;
      font-size: 14px;
      text-align: center;
      line-height: 40px;
    }
  }

  .back {
    position: absolute;
    left: 1.56vw;
    top: 5vw;
    cursor: pointer;
    z-index: 9999;
  }

  .model {
    width: 100%;
    height: 100%;
    overflow: hidden;
    iframe {
      width: 100%;
      height: 100%;
    }
  }

  .seasons {
    position: absolute;
    width: 100%;
    height: 100%;
    // background:url(./images/bg.png)center no-repeat;
    // background-size:cover;
    overflow: hidden;

    .imgbg {
      position: absolute;
      width: 100%;
      height: 100%;

      video {
        width: 100%;
        height: 100%;
        height: auto;
        object-fit: cover;
      }
    }
  }

  .bottom_options {
    position: absolute;
    bottom: 30px;
    left: 20px;

    span {
      display: inline-block;
      width: 40px;
      height: 40px;
      border-radius: 20px;
      color: #e7d09d;
      background: rgba(231, 208, 157, 50%);
      display: inline-flex;
      justify-content: center;
      align-items: center;
      font-size: 17px;
      margin: 0 8px;
      cursor: pointer;

      &.active {
        background: #9d3127;
      }
    }
  }

  .poster {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;

    .bg {
      position: absolute;
      width: 100%;
      height: 100%;
    }

    .tit {
      position: absolute;
      width: 14.53vw;
      top: 2.86vw;
      left: 2.86vw;
    }
  }

  .logo {
    position: absolute;
    width: 12.76vw;
    top: 1.56vw;
    left: 1.875vw;
  }

  .top-btns {
    position: absolute;
    top: 1.56vw;
    right: 1.56vw;
    width: 130px;
    height: 38px;
    width: 6.77vw;
    height: 1.979vw;
    background: #9d3127;
    border-radius: 0.52vw;
    display: flex;
    justify-content: center;
    align-items: center;
    pointer-events: none;

    .item {
      width: 3.125vw;
      height: 1.667vw;
      border-radius: 0.25vw;
      color: #e7d09d;
      display: flex;
      justify-content: center;
      align-items: center;
      cursor: pointer;
      pointer-events: auto;

      &.active {
        color: #9d3127;
        background: #e7d09d;
      }
    }
  }

  .left-btns {
    position: absolute;
    display: flex;
    justify-content: center;
    align-items: center;
    left: 1.56vw;
    top: 0;
    bottom: 0;
    margin: 0 auto;
    pointer-events: none;

    .list {
      width: 1.77vw;
      border-radius: 1vw;
      background: rgb(145 48 53/80%);
      text-align: center;
      display: flex;
      justify-content: center;
      align-items: center;
      flex-direction: column;
      pointer-events: all;
      .item {
        width: 1.354vw;
        height: 2vw;
        border-radius: 1vw;
        color: #e7d09d;
        display: flex;
        justify-content: center;
        align-items: center;
        margin: 0.2vw auto;
        cursor: pointer;

        &.active {
          color: #9d3127;
          background: #e7d09d;
        }
      }
    }
  }

  .bottom-btn {
    position: absolute;
    bottom: 1.56vw;
    left: 0;
    right: 0;
    margin: auto;
    width: 2.6vw;
    cursor: pointer;

    img {
      width: 100%;
    }
  }

  .hint {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background: rgba(0, 0, 0, 0.3);

    .step1 {
      width: 13.54vw;
      position: absolute;
      left: 4.89vw;
      top: 24vh;

      .txt {
        width: 100%;
      }

      .next {
        position: absolute;
        top: 6.5vw;
        right: 0.5vw;
        width: 2.6vw;
        color: #e7d09d;
        cursor: pointer;
        font-family: "SourceHanSerifCN-Medium";
      }
    }

    .step2 {
      position: absolute;
      width: 10.41vw;
      right: 5.26vw;
      top: 3.9vw;

      .txt {
        width: 100%;
      }

      .next {
        position: absolute;
        top: 6.197vw;
        right: 0.5vw;
        width: 2.6vw;
        color: #e7d09d;
        cursor: pointer;
        font-family: "SourceHanSerifCN-Medium";
      }
    }

    .step3 {
      position: absolute;
      width: 13.54vw;
      left: 4.89vw;
      top: 17.68vh;

      .txt {
        width: 100%;
      }

      .next {
        position: absolute;
        top: 6.197vw;
        right: 0.5vw;
        width: 2.6vw;
        color: #e7d09d;
        cursor: pointer;
        font-family: "SourceHanSerifCN-Medium";
      }
    }

    .step4 {
      position: absolute;
      width: 11.458vw;
      left: 0;
      right: 0;
      bottom: 5.2vw;
      margin: auto;

      .txt {
        width: 100%;
      }

      .next {
        position: absolute;
        top: 2.86vw;
        right: 0.5vw;
        width: 2.6vw;
        color: #e7d09d;
        cursor: pointer;
        font-family: "SourceHanSerifCN-Medium";
      }
    }
  }
  .pop_poster_shade {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    background: rgba(0, 0, 0, 0.5);
  }
  .pop_poster {
    position: absolute;
    width: 60vw;
    // height:34.895vw;
    height: calc(100vh * 0.6);
    background: #fff;
    border: 2px solid #e0c68d;
    left: 0;
    right: 0;
    bottom: 7.13vw;
    margin: 0 auto;
    font-size: 0;

    .loading {
      position: absolute;
      width: 100%;
      height: 100%;
      display: flex;
      justify-content: center;
      align-items: center;
    }

    .poster_con {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;

      img {
        width: 100%;
        height: 100%;
        object-fit: cover;
      }
    }

    .close_ico {
      position: absolute;
      top: 20px;
      right: 20px;
      cursor: pointer;
    }
    .share_ico {
      position: absolute;
      left: 0;
      right: 0;
      bottom: 20px;
      margin: auto;
      cursor: pointer;
    }
  }

  &.m {
    .back {
      position: absolute;
      width: 10.667vw;
      left: 4vw;
      top: 16vw;
      cursor: pointer;
    }

    .top-btns {
      width: 10vw;
      height: 31.33vw;
      flex-direction: column;
      border-radius: 1.333vw;

      .item {
        writing-mode: vertical-rl;
        width: 8.533vw;
        height: 14.667vw;
        border-radius: 1vw;
      }
    }

    .left-btns {
      left: 0;
      right: 0;
      top: auto;
      bottom: 6.667vw;
      margin: 0 auto;
      width: 86.667vw;
      height: 8vw;
      border-radius: 4vw;
      background: rgba(145, 48, 53, 0.8);

      .list {
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        background: none;
        display: flex;
        justify-content: center;
        flex-direction: row;

        .item {
          width: 10.6667vw;
          height: 6.667vw;
          border-radius: 3.33vw;
          font-family: "SourceHanSerifCN-Bold";
          font-size: 4.8vw;
        }
      }
    }

    .bottom-btn {
      width: 10.667vw;
      top: 4vw;
      left: 4vw;
      right: auto;
      bottom: auto;
    }

    .hint {
      .step1 {
        bottom: 14.667vw;
        left: 21.4667vw;
        width: 54.667vw;
        top: auto;

        .next {
          width: 12.2667vw;
          top: 19.4667vw;
          right: 1.8667vw;
        }
      }

      .step2 {
        width: 45.333vw;
        top: 35.2vw;
        right: 12.667vw;
        font-size: 0;

        .next {
          width: 12.2667vw;
          right: 1.8667vw;
          top: auto;
          bottom: 1.8667vw;
        }
      }

      .step3 {
        bottom: 14.667vw;
        left: 21.4667vw;
        width: 54.667vw;
        top: auto;

        .next {
          width: 12.2667vw;
          top: 19.4667vw;
          right: 1.8667vw;
        }
      }

      .step4 {
        width: 53.333vw;
        top: 15vw;
        right: auto;
        bottom: auto;
        left: 7.0667vw;
        font-size: 0;

        .next {
          width: 12.2667vw;
          right: 1.8667vw;
          top: auto;
          bottom: 1.8667vw;
        }
      }
    }

    .poster {
      .mtit1 {
        position: absolute;
        width: 29.6vw;
        top: 4vw;
        left: 4vw;
      }

      .mtit2 {
        position: absolute;
        width: 20.53vw;
        top: 4vw;
        right: 0.5vw;
      }
    }

    .pop_poster {
      top: 15vw;
      bottom: auto;

      .share_ico {
        width: 8vw;
        left: 0;
        right: 0;
        top: auto;
        bottom: 10px;
        margin: auto;
      }
    }

    .bottom_options {
      bottom: 20vw;

      span {
        display: flex;
        width: 30px;
        height: 30px;
        border-radius: 15px;
        margin: 10px auto;
      }
    }

    .seasons {
      .imgbg {
        display: flex;
        justify-content: center;
        align-items: center;

        video {
          height: 100%;
          width: auto;
        }
      }
    }
  }
  &.wap {
    .back {
      position: absolute;
      width: 7vw;
      left: 2vh;
      left: auto;
      right: 1vw;
      top: 1vw;
      cursor: pointer;
      transform: rotate(90deg);
    }
    .poster {
      .tit {
        width: 20.53vw;
        top: 7.86vw;
        left: 2.86vw;
        transform: rotate(90deg);
        left: auto;
        right: -12.14vw;
        transform-origin: 0 0;
      }
    }
    .top-btns {
      top: auto;
      right: -7vw;
      bottom: 11vw;
      width: 24vw;
      height: 7vw;
      transform: rotate(90deg);
      .item {
        width: 11vw;
        height: 6vw;
        border-radius: 0.5vw;
        font-size: 3.5vw;
      }
    }

    .left-btns {
      display: block;
      left: 43vw;
      transform: rotate(90deg);
      transform-origin: top;
      top: 5vw;
      &.btns2 {
        left: 83vw;
      }
      .list {
        width: 7vw;
        border-radius: 1vw;
        .item {
          width: 6vw;
          height: 6vw;
          font-size: 3.5vw;
          border-radius: 1.5vw;
          margin: 0.5vw auto;
        }
      }
    }

    .bottom-btn {
      width: 7vw;
      height: 7vw;
      bottom: 0;
      left: 14vw;
      top: 0;
      right: auto;
      margin: auto 0;
      transform: rotate(90deg);
    }

    .hint {
      .step1 {
        width: 15vw;
        left: 5.5vw;
        transform: rotate(90deg);
        width: 30vw;
        top: 15vw;
        left: 23vw;
        .next {
          width: 4.6vw;
          top: 5vw;
        }
      }

      .step2 {
        width: 15vw;
        width: 30vw;
        transform: rotate(90deg);
        bottom: 14vw;
        top: auto;
        right: 6vw;
        .next {
          width: 4.6vw;
          top: 7.5vw;
        }
      }

      .step3 {
        .next {
        }
      }

      .step4 {
        width: 15vw;
        bottom: 6.2vw;

        width: 30vw;
        transform: rotate(90deg) translateX(17vw);
        left: -82vw;
        top: 0;
        bottom: 0;
        margin: auto;
        height: 16vw;
        .next {
          width: 4.6vw;
          top: 3.5vw;
        }
      }
    }

    .poster {
      .mtit1 {
      }

      .mtit2 {
      }
    }

    .pop_poster {
      top: 0;
      bottom: 0;
      left: 10vw;
      margin: auto 0;

      .close_ico {
        width: 6vw;
        top: auto;
        bottom: 1vw;
        right: 1vw;
      }
      .share_ico {
        width: 6vw;
        top: 0;
        bottom: 0;
        left: 1vw;
        margin: auto 0;
        transform: rotate(90deg);
      }
    }

    .bottom_options {
      bottom: auto;
      top: 1vw;
      left: 1vw;
      span {
        display: flex;
        width: 6vw;
        height: 6vw;
        margin: 1vw 0;
        font-size: 3vw;
        transform: rotate(90deg);
      }
    }

    .seasons {
      .imgbg {
        video {
          width: auto;
          height: 100%;
          object-fit: cover;
        }
      }
    }
  }
}
</style>
